@import "base";
@import "flexbox";
@import "grid";

html {
  height: 100%;
}

body {
  height: 100%;
}

.Header {
  background: #2f4459;
  color: #ffffff;

  .Logo {
    .row;
    color: #1abc6e;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: 'Slackey', cursive;
    font-size: 2rem;
  }

}

section {

  article {
    div {
      background-color: #556c81;

      &>span {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
      }

      &>span:first-child {
        padding-left: 0.5rem;
      }

      &>span:nth-child(2) {
        .flex-justify-content(space-between);
        color: #FFC76D;
        padding-left: 2rem;
        padding-right: 2rem;
      }

      &>span:last-child {
        padding-right: 0.5rem;
      }
    }
    article {
      background-color: #0D2E4C;
      color: #ffffff;
    }
  }
}

.icon_global {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}

.rss_icon:before {
  font-family: "SocialFoundicons";
  .icon_global;
  content: "\f002";
  color: #ee802f;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  font-size: 2.8rem;
}

.left-icon:before {
  font-family: "GeneralFoundicons";
  .icon_global;
  content: "\f015";
  font-size: 1.5rem;
  color: #FFC76D;
}

.up-icon:before {
  font-family: "GeneralFoundicons";
  .icon_global;
  content: "\f016";
  font-size: 1.5rem;
  color: #FFC76D;
}

.NavLvOne {
  .row-str;

  nav {
    .row-str;
  }

  span {
    .row;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border: 2px solid #2f4459;
  }

  span:hover {
    border: 2px solid #140805;
    border-left-color: #3d170f;
    border-right-color: #3d170f;
    border-top-color: #521f14;
    border-bottom-color: #521f14;
    background-color: #521f14;
    color: #1abc6e;
  }

}

.NavLvTwo {
  background: #2f4459;
  color: #ffffff;
  .row-col;

  nav {
    width: 184px;
    .flex-1;
    .flex-align-content(flex-start);

    span {
      .row;
      border-top: 1px solid #140805;
      width: 100%;
      height: 50px;
      padding-left: 1rem;
    }

    span:last-child {
      border-bottom: 1px solid #140805;
    }

    span:hover {
      background-color: #143352;
    }
  }
}

